<!doctype html>
<html >
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
	<title>多益应用</title>
	<style>

		html,body,span,a,img,ul,li,header,menu{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
		body{line-height:1}
		ul,menu,li{list-style:none}
		a img{border:none}
		a:active{opacity: .8;text-decoration: none;}
		a:link,header a:visited{opacity: 1;text-decoration: none;color: #333;-webkit-tap-highlight-color:rgba(255,0,0,0);}

		html,body{-webkit-touch-callout: none;}
		/*base*/
		header{overflow: auto;display: block;height: 2.75em;background-color: #999;font-size: 1em;font-family:sans-serif,arial;white-space: nowrap;-webkit-overflow-scrolling: touch;}
		header a,header a:link,header a:visited{display: inline-block;margin: 0.75em 0.13em 0 0;padding: 0 1.75em;background-color: #cc6666;line-height: 2em;color: #fff;}
		header a:first-child{margin-left: 0.38em;}
		header a.current,header a.current:link,header a.current:visited{color: #333;background-color: #e6e6e6;animation: currentHead .8s ease-out 1;-moz-animation: currentHead .8s ease-out 1;-ms-animation: currentHead .8s ease-out 1;-webkit-animation: currentHead .8s ease-out 1;}
		menu{display: block;height: 2.54em;font-size: 0.8em;background-color: #e6e6e6;}
		menu li {display: inline-block;}
		menu a{display: inline-block;overflow: hidden;height: 2.3em;margin: 0 2em;line-height: 3em;cursor: pointer;background-color: none;}
		menu  a:hover{border-bottom: 0.24em solid rgba(174,0,0,.2);}
		menu a.current{border-bottom: 0.24em solid rgba(174,0,0,1);animation: currentMenu 0.2s ease-out 1;-moz-animation: currentMenu 0.2s ease-out 1;-ms-animation: currentMenu 0.2s ease-out 1;-webkit-animation: currentMenu 0.2s ease-out 1;}
		.content{margin: 0 0.75em;font-size: 1em;}
		.content li{position: relative;min-height: 3.75em;padding: 0.75em 0 0.75em 4.63em;border-bottom: 1px dotted #d6d6d6;color: #333;line-height: 2.2em;}
		.content li:last-child{border-bottom: 0 none;}
		.content li a{display: block;color: #333}
		.content li a img{position: absolute;top:0.75em;left:0em;width: 3.75em;}
		.content li a span{display: block;color: #666;font-size: 0.88em;line-height: 1.43em}
		@-webkit-keyframes currentMenu { 0% {border-bottom: 0.24em solid rgba(230,230,230,0);}  100% {border-bottom: 0.24em solid rgba(174,0,0,1);}}
		@-moz-keyframes currentMenu { 0% {border-bottom: 0.24em solid rgba(230,230,230,0);}  100% {border-bottom: 0.24em solid rgba(174,0,0,1);}}
		@-ms-keyframes currentMenu { 0% {border-bottom: 0.24em solid rgba(230,230,230,0);}  100% {border-bottom: 0.24em solid rgba(174,0,0,1);}}
		@-webkit-keyframes currentHead {from{background-color: #cc6666;color: #fff} to{background-color: #e6e6e6;color: #666}}
		@-moz-keyframes currentHead {from{background-color: #cc6666;color: #fff} to{background-color: #e6e6e6;color: #666}}
		@-ms-keyframes currentHead {from{background-color: #cc6666;color: #fff} to{background-color: #e6e6e6;color: #666}}
	</style>
</head>
<body>
	<header id="header">
		<a class="current" href="javascript:void(0)">全部</a>
		<a href="javascript:void(0)">iPhone</a>
		<a href="javascript:void(0)">iPad</a>
		<a href="javascript:void(0)">iPhone&iPad</a>
		<a href="javascript:void(0)">Android</a>
	</header>
	<menu>
		<a class="current" href="javascript:void(0)">正式版</a>
		<a href="javascript:void(0)">测试版</a>
	</menu>
	<ul class="content">
		<li>
			<a href="https://itunes.apple.com/cn/app/id566823940">
				<img src="http://img.duoyi.com/025/img/mobile/line001@2x.png" alt="领爱网">
				领爱网
				<span>让你的婚恋交友之路更精彩</span>
			</a>
		</li>
		<li>
			<a href="https://itunes.apple.com/cn/app/2980you-xiang/id584314515?mt=8">
				<img src="http://img.duoyi.com/025/img/mobile/line002@2x.png" alt="2980邮箱">
				2980邮箱
				<span>专业的邮箱功能，让沟通零障碍</span>
			</a>
		</li>
		<li>
			<a href="https://itunes.apple.com/cn/app/you-yong/id566794624?mt=8">
				<img src="http://img.duoyi.com/025/img/mobile/line003@2x.png" alt="友用">
				友用
				<span>友应用，齐分享</span>
			</a>
		</li>
		<li>
			<a href="https://itunes.apple.com/cn/app/fang-yu-ying-xiong/id442862434?mt=8">
				<img src="http://img.duoyi.com/025/img/mobile/line004@2x.png" alt="防御英雄">
				防御英雄
				<span>考验你的智慧与勇气的塔防游戏</span>
			</a>
		</li>
		<li>
			<a href="https://itunes.apple.com/cn/app/tan-ke-bu-dui!/id440466730?mt=8">
				<img src="http://img.duoyi.com/025/img/mobile/line005@2x.png" alt="坦克部队">
				坦克部队
				<span>简单好玩的坦克游戏，回味童年的乐趣</span>
			</a>
		</li>
		<li>
			<a href="https://itunes.apple.com/cn/app/meng-xiang-di-wangonline/id412411821?mt=8">
				<img src="http://img.duoyi.com/025/img/mobile/line006@2x.png" alt="梦想帝王">
				梦想帝王
				<span>大型战争策略类游戏，让你体验玩趣无穷</span>
			</a>
		</li>
		<li>
			<a href="https://itunes.apple.com/cn/app/duo-yi-you-le-he/id500993085?mt=8">
				<img src="http://img.duoyi.com/025/img/mobile/line007@2x.png" alt="多益幼乐盒">
				多益幼乐盒
				<span>充满童趣的图画，让孩子在轻松玩乐中学习</span>
			</a>
		</li>
		<li>
			<a href="https://itunes.apple.com/cn/app/wei-yu/id649657005?mt=8">
				<img src="http://img.duoyi.com/025/img/mobile/line008@2x.png" alt="微雨">
				微雨
				<span>倾听内心的话语，专属你的声音交友应用</span>
			</a>
		</li>
	</ul>

</body>
	<script src="http://style.025.cn/JS/jquerymin.js" type="text/javascript"></script>
	<script>
		// $(function(){       
		// 	$("header").find("a").click(function(){
		// 		var index = $("header a").index(this);
		// 		$("header").find(".current").removeClass("current");
		// 		$(this).addClass("current");
		// 	})
		// 	$("menu").find("a").click(function(){
		// 		var index = $("menu a").index(this);
		// 		$("menu").find(".current").removeClass("current");
		// 		$(this).addClass("current");
		// 	})   
		// }) 
		$(function(){ 
   
			$("header").find("a").click(function(){
				var index = $("header a").index(this);
				$("header").find(".current").removeClass("current");
				$(this).addClass("current");
			})
			$("menu").find("a").click(function(){
				var index = $("menu a").index(this);
				$("menu").find(".current").removeClass("current");
				$(this).addClass("current");
			}  

			// Create custom "Fast click" event.
   			var touchClick = false;
    		document.addEventListener("touchstart", function () {
        		touchClick = true
   			 }, false);
		    document.addEventListener("touchmove", function () {
				touchClick = false
		    }, false);
		    document.addEventListener("touchend", function (e) {

		        if (touchClick) {

		            // Send fast click.
		            var event = document.createEvent("CustomEvent");
		            event.initCustomEvent("fastclick", true, true, e.target);

		            e.target.dispatchEvent(event);
		            touchClick = false;
		        }
		    }, false);
			
		}) 



// var bolleanEnd = true;               
// $("#divTagList").find("a").click(function(){
// 	var index = $("#divTagList a").index(this);
// 	$("#divTagList").find(".current").removeClass("current");
// 	$(this).addClass("current");
// 	$(".content").addClass("fn_hide");
// 	$(".content").eq(index).removeClass("fn_hide");
// })  
// document.getElementById("btnMenu").ontouchend = function(e){
// 	$("#divMenu").slideDown("normal");                
// };          
// document.getElementById("divMenu").ontouchend = function(e){                
// 	stopEvent(e);
// };
// document.getElementById("divMenu").ontouchmove = function(e){
// 	stopEvent(e);
// 	bolleanEnd = false;
// };
// document.ontouchstart = function(){bolleanEnd = true ;}
// document.ontouchend = function(){
// 	var delay = setTimeout(function(){
// 		if(bolleanEnd){
// 		$("#divMenu").slideUp("normal");
// 	}
// 	clearTimeout(delay);
// 	},100);                
// };
// function stopEvent(e){
// 	var event = e || event;
// 	event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
// }

</script>
</html>